<script setup lang="ts">
import { ref } from 'vue';
import { useLoginHelper } from '@/hooks/useLoginHelper';
import { buildAssetSource } from '@/utils';

const show = ref(false);

const { redirectLogin } = useLoginHelper();

const redirectUrl = ref('');

const loginMethods = [
  {
    type: 'idCardLogin',
    title: '身份证登录',
    image: 'login-idcard.png',
    imgSize: [104, 104]
  },
  {
    type: 'medicalInsuranceLogin',
    title: '医保卡登录',
    image: 'login-yibao.png',
    imgSize: [92, 92]
  },
  {
    type: 'patientCardRegister',
    title: '就诊卡注册',
    image: 'login-ic.png',
    imgSize: [100, 100]
  },
  {
    type: 'faceRecognitionLogin',
    title: '人脸登录',
    image: 'login-face.png',
    imgSize: [88, 72]
  },
  {
    type: 'healthCardLogin',
    title: '健康卡登录',
    image: 'login-jiankangka.png',
    imgSize: [112, 112]
  },
  {
    type: 'patientCardLogin',
    title: '就诊卡登录',
    image: 'login-jiuzhenka.png',
    imgSize: [90, 90]
  }
];

function handleClose() {
  show.value = false;
}

function onOpenLoginModal(url?: string) {
  show.value = true;
  redirectUrl.value = url;
}

function handleLogin(type: string) {
  redirectLogin(`/pages/login/${type}`, redirectUrl.value);
  handleClose();
}

defineExpose({
  onOpenLoginModal
});
</script>

<template>
  <view v-show="show" class="popup-overlay">
    <view class="app-login">
      <view class="app-login__hd">
        <view class="app-login__title">
          用户登录
        </view>
        <view class="app-login__desc">
          请选择以下几种方式登录
        </view>
        <view class="app-login__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-login__content">
        <wd-row :gutter="15">
          <wd-col v-for="method in loginMethods" :key="method.type" :span="8">
            <view class="login-card mt-15" @click="handleLogin(method.type)">
              <view class="login-card__cover">
                <image
                  :src="buildAssetSource(method.image)"
                  :style="{
                    width: `${method.imgSize[0]}px`,
                    height: `${method.imgSize[1]}px`,
                  }"
                />
              </view>
              <view class="login-card__title">
                {{ method.title }}
              </view>
            </view>
          </wd-col>
        </wd-row>
      </view>
      <view class="app-login__footer">
        <view class="login-footer__title flex items-center">
          <image :src="buildAssetSource('login-alert.png')" class="mr-13 h-32 w-32" />温馨提示
        </view>
        <view class="login-footer__desc">
          <view class="login-footer__desc-item">
            1. 选择卡片登录，请先将卡片放置在感应区，保持平稳
          </view>
          <view class="login-footer__desc-item">
            2. 扫描完成后系统将自动识别您的信息
          </view>
          <view class="login-footer__desc-item">
            3. 如多次尝试无法识别，请尝试其他登录方式
          </view>
          <view class="login-footer__desc-item">
            4. 手动输入需输入您的姓名和身份证号
          </view>
          <view class="login-footer__desc-item">
            5. 可以手动关闭，自动返回首页
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup-overlay {
  @apply flex-center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.app-login {
  width: 886px;
  background: #fff;
  border-radius: 20px;
  padding-bottom: 35px;

  .app-login__hd {
    position: relative;
    padding-left: 46px;
    padding-top: 56px;

    .app-login__title {
      font-size: 54px;
      font-weight: bold;

      color: #333333;
    }
    .app-login__desc {
      font-size: 24.25px;
      color: var(--secondary-text-color);
      margin-top: 20px;
    }
    .app-login__close {
      position: absolute;
      top: 45px;
      right: 64px;
    }
  }

  .app-login__content {
    padding: 0 20px;
    margin-top: 35px;
    .login-card {
      @apply flex-center flex-col;
      background: #eef5ff;
      border-radius: 20px;
      height: 208px;
      border: 2px solid transparent;
      box-sizing: border-box;
      &:focus,
      &:hover {
        border-color: #377bf5;
        cursor: pointer;
      }
      .login-card__cover {
        @apply flex-center;
        width: 112px;
        height: 112px;
      }
      .login-card__title {
        font-size: 28px;
        font-weight: 500;
        color: #3d3d3d;
      }
    }
  }

  .app-login__footer {
    padding-left: 46px;
    margin-top: 46px;
    .login-footer__title {
      font-size: 32px;
      font-weight: bold;

      color: #f2ac2e;
      margin-bottom: 20px;
    }
    .login-footer__desc-item {
      color: var(--secondary-text-color);
      font-size: 24px;
      margin-bottom: 8px;
    }
  }
}
</style>
